<template>
  <div class="scroll-container1">
    <div class="header">
      <div class="site-title">
        <span class="site-icon" style="width: 20px; height: 20px"></span
        >{{ props.deviceinfo.name }}
      </div>
      <div class="main-title">
        <span class="top-title">集成电路单粒子效应测试系统监测平台</span>
      </div>
      <div class="weather-time-container">
        <span><span class="dateimg"></span>{{ currentDate }}</span>
        <span>{{ currentDay }}</span>
        <span style="font-size: 22px; font-weight: 700">{{ currentTime }}</span>
        <screenfull id="screenfull" class="right-menu-item hover-effect" />
      </div>
    </div>

    <!-- 设备展示与统计区域 -->
    <el-row :gutter="12" style="padding: 0px; margin: 0px">
      <el-col :span="7" style="height: 20vh">
        <div class="itemtitle">系统设备展示</div>
        <div class="itemtitlebottom"></div>
        <div class="iteminfo" style="height: 17vh">
          <el-row :gutter="24" style="position: relative; top: 2vh">
            <el-col :span="12" class="item-col">
              <img class="item-img" src="@/assets/images/index/aqyx.png" />
              <div class="item-text">
                <span class="item-label"
                  >安全运行<br /><span style="font-size: 17px"
                    >（小时）</span
                  ></span
                >
                <span class="item-value">{{ state.rundays }}</span>
              </div>
            </el-col>
            <el-col :span="12" class="item-col">
              <img class="item-img" src="@/assets/images/index/sbzs.png" />
              <div class="item-text">
                <span class="item-label"
                  >设备总数<br /><span style="font-size: 17px"
                    >（台）</span
                  ></span
                >
                <span class="item-value">{{ 1 }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="10" style="height: 20vh">
        <div class="itemtitle">器件统计</div>
        <div class="itemtitlebottom"></div>
        <div class="iteminfo" style="height: 17vh">
          <el-row :gutter="10" style="position: relative; top: 2vh">
            <el-col :span="6" class="item-col">
              <img class="item-img" src="@/assets/images/index/ypzl.png" />
              <div class="item-text">
                <span class="item-label">样品<br />次数</span>
                <span class="item-value">{{
                  formatLargeNumber(state.devicecount.totalDevices)
                }}</span>
              </div>
            </el-col>
            <el-col :span="6" class="item-col">
              <img class="item-img" src="@/assets/images/index/shzl.png" />
              <div class="item-text">
                <span class="item-label">闩锁<br />次数</span>
                <span
                  class="item-value"
                  :style="{ color: norderstatusColorMap['闩锁'] }"
                  >{{ formatLargeNumber(state.devicecount.statusCnt2) }}</span
                >
              </div>
            </el-col>
            <el-col :span="6" class="item-col">
              <img class="item-img" src="@/assets/images/index/thzl.png" />
              <div class="item-text">
                <span class="item-label">BRAM<br />翻转</span>
                <span
                  class="item-value"
                  :style="{ color: norderstatusColorMap['BRAM翻转'] }"
                  >{{ formatLargeNumber(state.devicecount.statusCnt3) }}</span
                >
              </div>
            </el-col>
            <el-col :span="6" class="item-col">
              <img class="item-img" src="@/assets/images/index/cram.png" />
              <div class="item-text">
                <span class="item-label">CRAM<br />翻转</span>
                <span
                  class="item-value"
                  :style="{ color: norderstatusColorMap['CRAM翻转'] }"
                  >{{ formatLargeNumber(state.devicecount.statusCnt4) }}</span
                >
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="7" style="height: 20vh">
        <div class="itemtitle">配置总容量</div>
        <div class="itemtitlebottom"></div>
        <div class="iteminfo" style="height: 17vh">
          <el-row :gutter="24" style="position: relative; top: 2vh">
            <el-col :span="12" class="item-col">
              <img class="item-img" src="@/assets/images/index/bram.png" />
              <div class="item-text">
                <span class="item-label">BRAM配置 <br />总容量</span>
                <span class="item-value">2392 Mb</span>
              </div>
            </el-col>
            <el-col :span="12" class="item-col">
              <img class="item-img" src="@/assets/images/index/cram.png" />
              <div class="item-text">
                <span class="item-label">CRAM配置 <br />总容量</span>
                <span class="item-value">12624 Mb</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <el-col :span="7" style="height: 32vh">
        <div class="itemtitle">设备状态</div>
        <div class="itemtitlebottom"></div>
        <div class="iteminfo" style="height: 29vh">
          <div class="frame-jHS-3">
            <div class="frame-JtK-1">
              <div class="img-AFx-1"></div>
              <div class="text-EFD-1">
                <div class="p-text-EFD-1">
                  <span class="span-glq-1">运行</span>
                </div>
              </div>
              <div class="text-XbU-2">
                <div class="p-text-XbU-2">
                  <span class="span-lQH-1">{{
                    state.deviceruninfo.isOffline ? "离线" : "正常"
                  }}</span>
                </div>
              </div>
            </div>
            <div class="frame-JtK-1">
              <div class="img-AFx-2"></div>
              <div class="text-EFD-1">
                <div class="p-text-EFD-1">
                  <span class="span-glq-1">存储</span>
                </div>
              </div>
              <div class="text-XbU-2">
                <div class="p-text-XbU-2">
                  <span class="span-lQH-1">
                    {{ state.deviceruninfo.storageStatus || "0.00" }}%</span
                  >
                </div>
              </div>
            </div>
            <div class="frame-JtK-1">
              <div class="img-AFx-3"></div>
              <div class="text-EFD-1">
                <div class="p-text-EFD-1">
                  <span class="span-glq-1">通信</span>
                </div>
              </div>
              <div class="text-XbU-2">
                <div class="p-text-XbU-2">
                  <span class="span-lQH-1">
                    {{ state.deviceruninfo.isOffline ? "离线" : "正常" }}</span
                  >
                </div>
              </div>
            </div>
            <div class="frame-JtK-1">
              <div class="img-AFx-4"></div>
              <div class="text-EFD-1">
                <div class="p-text-EFD-1">
                  <span class="span-glq-1">云服务</span>
                </div>
              </div>
              <div class="text-XbU-2">
                <div class="p-text-XbU-2">
                  <span class="span-lQH-1">在线</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10" style="height: 32vh">
        <div class="itemtitle">器件状态分布</div>
        <div class="itemtitlebottom"></div>
        <div class="iteminfo" style="height: 29vh">
          <div class="frame-JWQ-3">
            <span class="frame-Sbq-1" style="display: flex">
              <span class="vec-rectangle-mnV-3"></span>
              <span style="margin-left: 10px; font-size: 13px">闩锁</span>
            </span>
            <span class="frame-Sbq-1" style="display: flex">
              <span class="vec-rectangle-mnV-2"></span>
              <span style="margin-left: 10px; font-size: 13px">BRAM翻转</span>
            </span>
            <!-- <span class="frame-Sbq-1" style="display: flex">
                  <span class="vec-rectangle-mnV-4"></span>
                  <span style="margin-left: 10px; font-size: 13px">保护</span>
                </span> -->
            <span class="frame-Sbq-1" style="display: flex">
              <span class="vec-rectangle-mnV-5"></span>
              <span style="margin-left: 10px; font-size: 13px">CRAM翻转</span>
            </span>
            <span class="frame-Sbq-1" style="display: flex">
              <span class="vec-rectangle-mnV-1"></span>
              <span style="margin-left: 10px; font-size: 13px">正常</span>
            </span>
          </div>
          <el-divider style="margin: 10px 0" />
          <div
            style="width: 100vw; display: ruby"
            v-for="(row, rowIndex) in state.componentStatus"
            :key="rowIndex"
          >
            <div
              v-for="(status, colIndex) in row"
              :key="`${rowIndex}-${colIndex}`"
              :style="{
                background: getColorByStatus(status),
                width: '6%',
                height: '2.5vh',
                margin: '0.5% 1%',
                borderRadius: '2px',
                border: getBorderByStatus(status),
              }"
            ></div>
          </div>
        </div>
      </el-col>
      <el-col :span="7" style="height: 32vh">
        <div class="itemtitle">事件分布</div>
        <div class="itemtitlebottom"></div>
        <div class="iteminfo" style="height: 29vh">
          <div
            ref="pieChart"
            class="chart-container"
            style="height: 27vh"
          ></div>
        </div>
      </el-col>
      <el-col :span="7" style="height: 35vh">
        <div class="itemtitle">基地分布</div>
        <div class="itemtitlebottom"></div>
        <div class="iteminfo" style="padding-bottom: 0px">
          <div
            ref="chinaMap"
            class="chart-container"
            style="height: 32vh"
          ></div>
        </div>
      </el-col>
      <el-col :span="10" style="height: 35vh">
        <div class="itemtitle">测试状态</div>
        <div class="itemtitlebottom"></div>
        <div class="iteminfo" style="padding-bottom: 0px">
          <div
            ref="lineChart"
            class="chart-container"
            style="height: 32vh"
          ></div>
        </div>
      </el-col>
      <el-col :span="7" style="height: 35vh">
        <div class="itemtitle">报警事件</div>
        <div class="itemtitlebottom"></div>
        <div class="iteminfo" style="height: 34vh">
          <div style="overflow: auto">
            <el-row v-for="(alarm, index) in alarmEvents" :key="index">
              <el-col :span="2">
                <div class="img-QZp-1"></div>
              </el-col>
              <el-col :span="16">
                <div>
                  <span class="span-aGv-1">{{ alarm.deviceName }}</span>
                  <span class="span-aGv-2">{{ alarm.eventName }}</span>
                </div>
                <div>
                  <span class="text-MZK-1">{{ alarm.time }}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <span class="text-KuT-2">{{ alarm.processStatus }}</span>
              </el-col>
              <el-divider
                v-if="index < alarmEvents.length - 1"
                style="margin: 10px 0"
              />
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  onUnmounted,
  nextTick,
  reactive,
  watch,
  getCurrentInstance,
} from "vue";
import * as echarts from "echarts";
// 引入中国地图数据
import chinaJson from "@/assets/json/chinafull.json";
import { getCount, getLastsixmonth } from "@/api/device/deviceStatusCount";
import { alarmlist } from "@/api/device/alarmRecord";
import {
  getdevicerunlastData,
  getdevicerunDays,
} from "@/api/device/deviceRunCount";
import { devicemaplist } from "@/api/system/device";
import { getComponentStatusIC } from "@/api/device/componentStatusIC";
import Screenfull from "@/components/Screenfull";
import { formatLargeNumber } from "@/utils/index";
import "@/assets/styles/index.css";
echarts.registerMap("china", chinaJson);
const { proxy } = getCurrentInstance();
// 定义图表容器的 ref
const barChart = ref(null);
const lineChart = ref(null);
const pieChart = ref(null);
const chinaMap = ref(null);
// 省会城市数据
const provincialCities = [
  { name: "哈尔滨", value: [126.63, 45.75] },
  { name: "长春", value: [125.35, 43.88] },
  { name: "沈阳", value: [123.43, 41.8] },
  { name: "呼和浩特", value: [111.65, 40.82] },
  { name: "石家庄", value: [114.48, 38.03] },
  { name: "太原", value: [112.53, 37.87] },
  { name: "济南", value: [117, 36.65] },
  { name: "郑州", value: [113.65, 34.76] },
  { name: "西安", value: [108.95, 34.27] },
  { name: "兰州", value: [103.73, 36.03] },
  { name: "西宁", value: [101.74, 36.56] },
  { name: "乌鲁木齐", value: [87.68, 43.77] },
  { name: "成都", value: [104.06, 30.57] },
  { name: "武汉", value: [114.31, 30.52] },
  { name: "长沙", value: [113, 28.21] },
  { name: "南京", value: [118.76, 32.04] },
  { name: "合肥", value: [117.27, 31.86] },
  { name: "杭州", value: [120.19, 30.26] },
  { name: "南昌", value: [115.89, 28.68] },
  { name: "福州", value: [119.3, 26.08] },
  { name: "广州", value: [113.23, 23.16] },
  { name: "南宁", value: [108.33, 22.84] },
  { name: "昆明", value: [102.73, 25.04] },
  { name: "贵阳", value: [106.71, 26.57] },
  { name: "海口", value: [110.35, 20.02] },
  { name: "台北", value: [121.5, 25.03] },
  { name: "香港", value: [114.1, 22.3] },
  { name: "澳门", value: [113.54, 22.19] },
  { name: "北京", value: [116.46, 39.92] },
  { name: "上海", value: [121.48, 31.22] },
  { name: "天津", value: [117.2, 39.13] },
  { name: "重庆", value: [106.54, 29.59] },
  { name: "拉萨", value: [91.11, 29.97] },
];
const props = defineProps({
  deviceinfo: {
    type: Object,
    default: { type: "ic", datasourceindex: "" },
  },
});
const state = reactive({
  rundays: 0,
  deviceruninfos: [{ storageStatus: "0" }],
  deviceruninfo: { storageStatus: "0" },
  devicecount: {
    totalDevices: 0,
    statusCnt1: 0,
    statusCnt2: 0,
    statusCnt3: 0,
    statusCnt4: 0,
    totalDevices: 0,
  },
  deviceList: [],
  lastweekCount: [],
  componentStatus: [],
});
const alarmEvents = ref([]);

// 初始化柱状图的函数
const initBarChart = () => {
  // 检查 ref 值是否存在
  if (!barChart.value) {
    console.warn("barChart ref 为空，无法初始化图表");
    return;
  }
  const defaultOption = {
    step: 0.2, // 数值越大速度滚动越快
    limitMoveNum: 4, // 开始无缝滚动的数据量
    hoverStop: true, // 是否开启鼠标悬停stop
    direction: 1, // 0向下 1向上 2向左 3向右
    openWatch: true, // 开启数据实时监控刷新dom
    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)
    waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
  };

  const barChartInstance = echarts.init(barChart.value);
  const barOption = {
    grid: {
      right: 0,
      bottom: 0,
      left: 0,
      containLabel: true, // 确保标签不被剪切
    },
    title: {
      text: "器件监控",
      textStyle: {
        color: "#ffffff",
      },
    },
    xAxis: {
      type: "category",
      data: Object.keys(statusColorMap),
      axisLabel: {
        color: "#ffffff",
      },
    },
    yAxis: {
      type: "value",
      show: false,
      axisLabel: {
        color: "#ffffff",
      },
    },
    series: [
      {
        data: [
          { value: state.devicecount.statusCnt2, name: "闩锁" },
          { value: state.devicecount.statusCnt3, name: "BRAM翻转" },
          { value: state.devicecount.statusCnt4, name: "CRAM翻转" },
          { value: state.devicecount.statusCnt1, name: "正常" },
        ],
        type: "bar",
        barWidth: "40%",
        itemStyle: {
          color: (params) => {
            const statusName = params.data.name;
            return norderstatusColorMap[statusName] || "#5470c6";
          },
        },
        // 添加 label 配置，在柱子顶部显示数据
        label: {
          show: true, // 显示标签
          position: "top", // 标签位置在柱子顶部
          color: (params) => {
            const statusName = params.data.name;
            return norderstatusColorMap[statusName] || "#ffffff";
          },
          // fontSize: 12, // 标签文字大小
        },
        // color: "#5470c6",
      },
    ],
  };
  barChartInstance.setOption(barOption);
};

// 初始化折线图的函数
const initLineChart = () => {
  if (!lineChart.value) return;
  const lineChartInstance = echarts.init(lineChart.value);
  const lineOption = {
    grid: {
      bottom: 0,
      left: 20,
      right: 40,
      containLabel: true, // 确保标签不被剪切
    },
    xAxis: {
      type: "category",
      data: state.lastweekCount.map((item) => {
        const date = new Date(item.time);
        return `${String(date.getFullYear()).padStart(4, "0")}-${String(
          date.getMonth() + 1
        ).padStart(2, "0")}`;
      }),
      axisLabel: {
        color: "#ffffff", // 设置 x 轴文字颜色为白色
      },
      axisLine: {
        lineStyle: {
          color: "#ffffff",
        },
      },
      name: "月份/月",
    },
    yAxis: [
      {
        type: "value",
        name: "闩锁次数/次",
        minInterval: 1,
        axisLabel: {
          color: "#ffffff",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.8)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.2)", // 降低横线亮度
          },
        },
        position: "left", // 左侧Y轴
      },
      {
        type: "value",
        name: "翻转次数/次",
        minInterval: 1,
        axisLabel: {
          color: "#ffffff",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.8)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.2)", // 降低横线亮度
          },
        },
        position: "right", // 右侧Y轴
      },
    ],
    // 添加图例配置
    legend: {
      type: "plain", // 普通图例
      orient: "horizontal", // 水平布局
      right: "center", // 距离右侧 5% 的位置，可按需调整
      top: "2%", // 距离顶部 5% 的位置，可按需调整表顶部

      textStyle: {
        color: "#ffffff", // 图例文字颜色
      },
      // 自动从 series 中获取图例数据
      data: ["闩锁", "翻转"],
    },
    series: [
      {
        data: state.lastweekCount.map((item) => item.statusCnt2 || 0),
        type: "bar",
        name: "闩锁",
        itemStyle: { color: norderstatusColorMap["闩锁"] },
        yAxisIndex: 0, // 使用左侧Y轴
      },
      {
        data: state.lastweekCount.map(
          (item) => item.statusCnt3 + item.statusCnt4 || 0
        ),
        type: "bar",
        name: "翻转",
        itemStyle: { color: norderstatusColorMap["BRAM翻转"] },
        yAxisIndex: 1, // 使用右侧Y轴
      },
      // {
      //   data: state.lastweekCount.map((item) => item.statusCnt1 || 0),
      //   type: "bar",
      //   name: "正常",
      //   itemStyle: { color: norderstatusColorMap["正常"] },
      // },
      // {
      //   data: state.lastweekCount.map((item) => item.statusCnt4 || 0),
      //   type: "bar",
      //   name: "CRAM翻转",
      //   itemStyle: { color: norderstatusColorMap["CRAM翻转"] },
      // },
      // {
      //   type: "line",
      //   data: state.lastweekCount.map((item) => item.statusCnt3 || 0),
      //   name: "正常",
      //   itemStyle: { color: norderstatusColorMap["正常"] },
      // },
    ],
  };
  lineChartInstance.setOption(lineOption);
};

// 初始化饼图的函数
const initPieChart = () => {
  if (!pieChart.value) return;
  const pieChartInstance = echarts.init(pieChart.value);
  const pieOption = {
    grid: {
      right: 0,
      bottom: 0,
      left: 0,
      containLabel: true, // 确保标签不被剪切
    },

    // 添加图例配置
    legend: {
      type: "plain", // 普通图例
      orient: "horizontal", // 水平布局
      // top: "5%", // 位于图表顶部
      right: "2%", // 距离右侧 5% 的位置，可按需调整
      textStyle: {
        color: "#ffffff", // 图例文字颜色
      },
    },
    series: [
      {
        name: "事件分布",
        type: "pie",
        radius: "50%",
        label: {
          show: true,
          color: "#ffffff",
          // 修改 formatter 以显示数量和百分比
          formatter: "{b}: {c} ({d}%)",
          fontSize: 18,
        },
        // 设置饼图中心位置，第二个值增大可让饼图向下移动
        center: ["50%", "50%"],

        data: [
          {
            value: state.devicecount.statusCnt2,
            name: "闩锁",
            itemStyle: { color: norderstatusColorMap["闩锁"] },
          },
          {
            value: state.devicecount.statusCnt3,
            name: "BRAM翻转",
            itemStyle: { color: norderstatusColorMap["BRAM翻转"] },
          },

          {
            value: state.devicecount.statusCnt4,
            name: "CRAM翻转",
            itemStyle: { color: norderstatusColorMap["CRAM翻转"] },
          },
          {
            value: state.devicecount.statusCnt1,
            name: "正常",
            itemStyle: { color: norderstatusColorMap["正常"] },
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  pieChartInstance.setOption(pieOption);
};
function getTimeFactor() {
  return Date.now() / 1000;
}
// 初始化中国地图的函数
const initChinaMap = () => {
  if (!chinaMap.value) return;
  const chinaMapInstance = echarts.init(chinaMap.value);

  const chinaMapOption = {
    grid: {
      right: 0,
      bottom: 0,
      left: 0,
      containLabel: true, // 确保标签不被剪切
    },
    tooltip: {
      trigger: "item",
    },
    geo: {
      map: "china", // 使用中国地图，确保已经加载了中国地图的 JSON 数据
      label: {
        emphasis: {
          show: false,
        },
      },

      roam: true, // 是否允许缩放和平移漫游
      // 设置中心点为四川
      // center: [104.0658, 30.5728],
      // 设置中心点为西藏
      center:
        props.deviceinfo.lng && props.deviceinfo.lat
          ? [props.deviceinfo.lng, props.deviceinfo.lat]
          : [92.9289, 31.1965],
      // 放大地图
      zoom: 6,
      // 美化地图样式
      itemStyle: {
        normal: {
          areaColor: "#2c3e50", // 深灰色，比原来的 "#e7e8ea" 更暗
          borderColor: "#009e8", // 深灰色边框，比原来的 "#009e8" 更暗
        },
        emphasis: {
          areaColor: "#f47920", // 鼠标悬停时地图区域颜色
        },
      },
    },
    series: [
      {
        name: "设备分布",
        type: "scatter", // 使用散点图类型来标记点
        coordinateSystem: "geo", // 指定使用地理坐标系

        data:
          props.deviceinfo.lng && props.deviceinfo.lat
            ? [
                {
                  name: props.deviceinfo.name,
                  value: [props.deviceinfo.lng, props.deviceinfo.lat],
                },
              ]
            : [],
        symbol: `image://${
          new URL("@/assets/images/index/dingwei4.png", import.meta.url).href
        }`,
        symbolSize: function (val) {
          return 40;
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}", // 只显示名称
        },
        label: {
          normal: {
            formatter: "{b}", // 显示点的名称
            position: "bottom",
            show: true,
            fontSize: 18, // 鼠标悬停时字体可以更大
          },
          emphasis: {
            show: true,
          },
        },
      },
      {
        name: "省会",
        type: "scatter",
        coordinateSystem: "geo",
        data: provincialCities,
        symbolSize: 8,
        tooltip: {
          trigger: "item",
          formatter: "{b}", // 只显示名称
        },
        label: {
          normal: {
            formatter: "{b}", // 显示点的名称
            position: "right",
            fontSize: 20,
            show: true,
          },
          emphasis: {
            show: true,
            fontSize: 20,
          },
        },

        itemStyle: {
          color: "#ff0000",
        },
      },
    ],
  };
  chinaMapInstance.setOption(chinaMapOption);
};

// 定义状态和颜色的映射
const statusColorMap = {
  闩锁: "rgba(249, 57, 32, 0.4)",
  BRAM翻转: "rgba(252, 136, 0, 0.4)",
  CRAM翻转: "rgba(255, 235, 59, 0.4)",
  正常: "rgba(59, 179, 70, 0.4)",
};
const norderstatusColorMap = {
  闩锁: "rgba(249, 57, 32)",
  BRAM翻转: "rgba(252, 136, 0)",
  CRAM翻转: "rgba(255, 235, 59)",
  正常: "rgba(59, 179, 70)",
};

// 根据状态获取颜色
const getColorByStatus = (status) => {
  return statusColorMap[status] || "transparent";
};

// 根据状态获取 border
const getBorderByStatus = (status) => {
  return `${norderstatusColorMap[status]} 1px solid` || "transparent";
};
// 定义时间、日期和星期的 ref
const currentTime = ref("");
const currentDate = ref("");
const currentDay = ref("");

let timer;

// 更新时间的函数
const updateTime = () => {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const days = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];

  currentTime.value = `${hours}:${minutes}:${seconds}`;
  currentDate.value = `${year}-${month}-${day}`;
  currentDay.value = days[date.getDay()];
};

// 添加窗口大小变化处理函数
const handleResize = () => {
  // 延迟执行，避免频繁触发
  setTimeout(() => {
    // 检查图表实例是否存在，存在则调用resize方法
    if (barChart.value) {
      echarts.getInstanceByDom(barChart.value)?.resize();
    }
    if (lineChart.value) {
      echarts.getInstanceByDom(lineChart.value)?.resize();
    }
    if (pieChart.value) {
      echarts.getInstanceByDom(pieChart.value)?.resize();
    }
    if (chinaMap.value) {
      echarts.getInstanceByDom(chinaMap.value)?.resize();
    }
  }, 100);
};

// 定义数据获取函数
const fetchData = () => {
  let requestdata = {
    id: props.deviceinfo.id,
    name: props.deviceinfo.name,
    code: props.deviceinfo.code,
    type: props.deviceinfo.type,
    datasourceindex: props.deviceinfo.datasourceindex,
    status: props.deviceinfo.status,
    deviceindex: props.deviceinfo.deviceindex,
    topic: props.deviceinfo.topic,
  };
  getCount(requestdata).then((res) => {
    state.devicecount = res;
    // initBarChart();
    initPieChart();
  });
  alarmlist(requestdata).then((res) => (alarmEvents.value = res));
  // devicemaplist(requestdata).then((res) => {
  //   state.deviceList = res;
  initChinaMap();
  // });
  getComponentStatusIC(requestdata).then((res) => {
    state.componentStatus = res;
  });

  getLastsixmonth(requestdata).then((res) => {
    state.lastweekCount = res;
    initLineChart();
  });
  getdevicerunlastData(requestdata).then((res) => {
    state.deviceruninfo = res;
  });
  getdevicerunDays(requestdata).then((res) => {
    state.rundays = res;
  });
};

let dataTimer; // 数据定时器

onMounted(() => {
  // 初始化时间
  // 添加空值检查，避免访问undefined的属性
  fetchData();
  dataTimer = setInterval(fetchData, 300000);
  updateTime();
  // 每秒更新一次时间
  timer = setInterval(updateTime, 1000);
  // 添加窗口大小变化监听
  window.addEventListener("resize", handleResize);

  // 初始加载时触发一次resize确保图表正确显示
  nextTick(() => {
    handleResize();
  });
});
onUnmounted(() => {
  // 组件卸载时清除定时器
  clearInterval(dataTimer);
  clearInterval(timer);
});
watch(
  () => props.deviceinfo,
  (newval) => {
    // 修复拼写错误：devceinfo -> deviceinfo
    if (newval) {
      fetchData();
      clearInterval(dataTimer);
      dataTimer = setInterval(fetchData, 300000);
    }
  }
);
</script>

<style scoped>
/* 全局容器样式 */
.scroll-container1 {
  background-color: royalblue;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/index/indexbg.png");
  mix-blend-mode: overlay;
  background-size: 100% 100%;

  mix-blend-mode: normal;

  color: white;
}

.site-title {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 130px;

  color: rgba(12, 209, 225, 1);
  font-size: 18px;
  font-weight: 700;
  font-family: "HarmonyOSSansSC-Bold";
  white-space: nowrap;
}

.main-title {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}

.top-title {
  font-size: 36px;
  font-weight: 700;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(145, 251, 255, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.weather-time-container {
  position: absolute;
  top: 20px;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  color: rgba(12, 209, 225, 1);
  font-size: 18px;
  font-weight: 700;
  gap: 10px;
}

/* 删除未使用的.decoration样式 */

.item-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-value {
  margin-top: 10px;
  color: rgba(80, 212, 217, 1);
  font-size: 28px;
  font-weight: 700;
  font-family: "HarmonyOSSansSC-Bold";
  letter-spacing: 0px;
  white-space: nowrap;
}
.chart-container {
  width: 100%;
  height: 21vh;
}

/* 删除未使用的.main-content样式 */

.frame-JWQ-3 {
  width: auto;
  display: flex;
  margin-bottom: 5px;
  height: auto;
  mix-blend-mode: normal;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 34px;
  row-gap: 34px;
  column-gap: 34px;
}
.vec-rectangle-mnV-1 {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  mix-blend-mode: normal;
  display: flex;
  box-sizing: border-box;
  opacity: 1;
  background: rgba(59, 179, 70, 0.4);
  border: rgba(59, 179, 70) 1px solid;
  order: 0;
  flex-shrink: 0;
}
.vec-rectangle-mnV-2 {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  mix-blend-mode: normal;
  display: flex;
  box-sizing: border-box;
  opacity: 1;
  background: rgba(252, 136, 0, 0.4);
  border: rgba(252, 136, 0) 1px solid;
  order: 0;
  flex-shrink: 0;
}
.vec-rectangle-mnV-3 {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  mix-blend-mode: normal;
  display: flex;
  box-sizing: border-box;
  opacity: 1;
  background: rgba(249, 57, 32, 0.4);
  border: rgba(249, 57, 32) 1px solid;
  order: 0;
  flex-shrink: 0;
}
.vec-rectangle-mnV-4 {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  mix-blend-mode: normal;
  display: flex;
  box-sizing: border-box;
  opacity: 1;
  background: rgba(59, 150, 255, 0.4);
  border: rgba(59, 150, 255) 1px solid;
  order: 0;
  flex-shrink: 0;
}
.vec-rectangle-mnV-5 {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  mix-blend-mode: normal;
  display: flex;
  box-sizing: border-box;
  opacity: 1;
  background: rgba(255, 235, 59, 0.4);
  border: rgba(255, 235, 59) 1px solid;
  order: 0;
  flex-shrink: 0;
}
.frame-Sbq-1 span {
  /* 允许单词内换行，防止内容溢出 */
  word-break: break-all;
  /* 文本溢出容器时自动换行 */
  white-space: normal;
}

/* 删除未使用的.frame-IxF-35样式 */
/* 删除未使用的.text-sPe-1样式 */

/* 删除未使用的.frame-JTP-2、.frame-XRd-3、.frame-rig-4样式 */
/* 删除未使用的.frame-dDX-2样式 */

.text-EFD-1 {
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  height: 25px;
  mix-blend-mode: normal;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.008999994920136839px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  opacity: 1;
  font-family: "HarmonyOSSansSC-Medium";
  white-space: pre-wrap;
  order: 0;
  flex-shrink: 0;
}
.p-text-EFD-1 {
  display: inline;
  margin: 0px;
  width: 100%;
  text-align: center;
}
.text-XbU-2 {
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(80, 212, 217, 1);
  font-size: 24px;
  font-weight: 700;
  opacity: 1;
  font-family: "HarmonyOSSansSC-Bold";
  letter-spacing: 0px;
  white-space: nowrap;
  order: 1;
  min-height: 29px;
}

.text-KuT-2 {
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  height: 19px;
  mix-blend-mode: normal;
  color: rgba(59, 179, 70, 1);
  letter-spacing: -0.008999994920136839px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  opacity: 1;
  font-family: "HarmonyOSSansSC-Bold";
  white-space: pre-wrap;
  order: 1;
  flex-shrink: 0;
}
.text-MZK-1 {
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;

  height: 18px;
  mix-blend-mode: normal;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.008999994920136839px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  opacity: 1;
  font-family: "HarmonyOSSansSC-Medium";
  white-space: pre-wrap;
}
.img-QZp-1 {
  border: unset !important;
  box-shadow: unset;
  width: 24px;
  height: 24px;
  mix-blend-mode: normal;
  display: flex;
  background: url("@/assets/images/index/warn.png");
  order: 0;
  flex-shrink: 0;
}
.site-icon {
  display: inline-block;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  background-image: url("@/assets/images/index/position.png");
  background-size: 100% 100%;
}
.dateimg {
  display: inline-block;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  background-image: url("@/assets/images/index/date.png");
  background-size: 100% 100%;
}

/* 报警事件轮播样式 */
.seamless-warp {
  height: 25vh;
  overflow: hidden;
}
.capacity-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 10vh;
  padding: 0;
}

.capacity-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.capacity-icon {
  /* border-radius: 50%; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.bram-icon {
  background-color: rgba(252, 136, 0, 0.4);
  border: 1px solid rgba(252, 136, 0);
  background-image: url("@/assets/images/index/bram.png");
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
}

.cram-icon {
  background-color: rgba(255, 235, 59, 0.4);
  border: 1px solid rgba(255, 235, 59);
  background-image: url("@/assets/images/index/cram.png");
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
}

.capacity-text {
  display: flex;
  flex-direction: column;
}

.capacity-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

.capacity-value {
  color: rgba(80, 212, 217, 1);
  font-size: 20px;
  font-weight: 700;
}
</style>
